<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">  <!-- 设置字符编码为 UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章资讯</title>
    <link rel="icon" href="/img/favicon.png" type="image/png">
    <script src="libs/axios.min.js"></script>
    <script src="libs/vue.global.js"></script>
    <script src="libs/index.full.js"></script>
    <script src="js/navbar.js"></script>
    <link rel="stylesheet" href="libs/index.css">
    <link rel="stylesheet" href="css/navbar.css">
    <link rel="stylesheet" href="css/article.css">
</head>
<body>
<div id="app" class="full_container">
    <div id="navbar" class="navbar"></div>
    <div class="app_container">
        <div class="wrapper">
            <div v-for="(article, index) in articles" :key="index" class="article-card">
                <div class="article-item" @click="goToDetail(article.id)">
                    <img :src="article?.imageUrl" class="article-item-img">
                    <div class="article-item-container">
                        <div class="article-item-container-text">
                            {{article?.title}}
                        </div>
                        <div class="article-item-container2">
                            <img class="article-item-container2-icon" src="/img/up.png">
                            <span class="article-item-container2-span">{{article?.author}} · {{formatTime(article?.publishedAt)}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :total="total"
                layout="prev, pager, next, jumper"
                @current-change="fetchArticles"
                @size-change="fetchArticles"
        />
    </div>
</div>
<script>
    const {createApp} = Vue;

    const {ElMessage} = ElementPlus;

    createApp({
        data(){
            return{
                articles: [], // 存储分页数据
                currentPage: 1, // 当前页
                pageSize: 15, // 每页大小
                total: 0, // 数据总数
                currentUserId:null,
            }
        },
        mounted() {
            this.fetchArticles();
            this.getCurrentUser();
        },
        methods: {
            formatTime(timestamp) {
                const now = new Date();
                const messageDate = new Date(timestamp);

                const year = messageDate.getFullYear();
                const month = String(messageDate.getMonth() + 1).padStart(2, '0');
                const day = String(messageDate.getDate()).padStart(2, '0');
                const hours = String(messageDate.getHours()).padStart(2, '0');
                const minutes = String(messageDate.getMinutes()).padStart(2, '0');
                const seconds = String(messageDate.getSeconds()).padStart(2, '0');

                // 计算时间差
                const diffTime = now - messageDate;
                const diffDays = Math.floor(diffTime / (1000 * 3600 * 24)); // 转换为天数

                if (diffDays === 0) {
                    // 如果在今天，返回时分秒
                    return `${hours}:${minutes}`;
                } else if (diffDays === 1) {
                    // 如果昨天，返回“昨天”
                    return `昨天 `;
                } else {
                    // 如果超过昨天，返回日期 (MM/DD/YY)
                    return `${String(year).slice(2)}/${month}/${day}`;
                }
            },
            // 获取当前用户
            getCurrentUser() {
                axios.get('http://localhost:8080/chat/currentUser')
                    .then(response => {
                        if (response.data.code === 200) {
                            this.currentUserId = response.data.data.id;
                        } else {
                            console.warn("未登录，跳转到登录页");
                            window.location.href = "/login.html"; // 重定向到登录页
                        }
                    })
                    .catch(error => console.error("获取当前用户失败:", error));
            },
            fetchArticles() {
                axios
                    .get("http://localhost:8080/article/list", {
                        params: { page: this.currentPage, size: this.pageSize },
                    })
                    .then((response) => {
                        this.articles = response.data.records; // 获取当前页的数据
                        this.total = response.data.total;
                        console.log(this.articles)
                    })
                    .catch((error) => {
                        console.error("获取文章列表失败:", error);
                    });
            },
            // **分页切换**
            handlePageChange(newPage) {
                this.currentPage = newPage;
            },
            goToDetail(articleId) {
                window.location.href = `article_detail.html?id=${articleId}&userId=${this.currentUserId}`;
            }
        }
    }).use(ElementPlus).mount('#app');
</script>
</body>
</html>